<template>
  <div class="center-chart-2">
    <el-carousel
      v-if="pager.length"
      ref="Carousel"
      trigger="click"
      height="100%"
      indicator-position="none"
      :interval="10000"
    >
      <el-carousel-item v-for="(page, i) in pager" :key="i">
        <div class="content-panel">
          <div class="content" v-for="(config, j) in page" :key="j">
            <div class="title">{{ config.customTitle }}</div>
            <dv-scroll-board
              v-if="config.data"
              :config="config"
              class="lc1-chart"
            />
            <div v-else-if="config.customTitle" class="no-data">暂无数据</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
<script>
import { getTaskContent } from "@/api/dashboard/blowIrriagtionSpinLine";
export default {
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pager: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.lineItem || !this.groupItem) {
        return;
      }
      const param = {
        classStartTime: this.groupItem.startTime,
        classEndTime: this.groupItem.endTime,
        lineId: this.lineItem.properties.lineId,
      };
      getTaskContent(param).then((res) => {
        const data = res?.data || [];

        let pageNum = 2;
        let pager = [];
        const num =
          data.length % pageNum == 0
            ? data.length
            : data.length + (pageNum - (data.length % pageNum));
        let page = [];
        for (let i = 0; i < num; i++) {
          const ele = data[i];
          if (ele) {
            // 排序
            const _titles = ele.taskBoardDto?.boardFieldList
              ? ele.taskBoardDto.boardFieldList.sort((a, b) => {
                  return a.boardColIndex > b.boardColIndex ? 1 : -1;
                })
              : [];
            page.push({
              customTitle: ele.taskBoardDto.taskBoardName,
              headerBGC: "#050f67",
              header: _titles.map((t) => t.label),
              data: ele.contentList.map((l) => {
                return _titles.map((t) => {
                  const valueitem = l.find((c) => c.fieldCode == t.customCode);
                  return (
                    valueitem?.attachmentName || valueitem?.fieldValue || ""
                  );
                });
              }),
              rowNum: 4,
              index: true,
              indexHeader: "序号",
              columnWidth: [60, 130, 130, 130, 130, 130],
              align: ["center"],
              oddRowBGC: "#053a6d",
              evenRowBGC: "#091c56",
            });
          } else {
            page.push({});
          }
          if (i > 0 && i % pageNum == pageNum - 1) {
            pager.push(page);
            page = [];
          }
        }

        this.pager = pager;
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.center-chart-2 {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  .el-carousel {
    height: 100%;
  }
  .content-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    margin: 10px 0;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .lc1-chart {
    flex: 1;
  }
  ::v-deep .dv-scroll-board {
    .rows .ceil,
    .header .header-item {
      white-space: unset;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: normal !important;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
}
::v-deep .el-carousel__item.is-animating {
  transition-duration: 1s;
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
